﻿<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>幸福里花卉-忘记密码</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Favicon -->
    <link
      rel="shortcut icon"
      type="image/x-icon"
      href="assets/images/favicon.png"
    />

    <!-- CSS
	============================================ -->

    <!-- Bootstrap CSS -->
    <!-- <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css"> -->

    <!-- Icon Font CSS -->
    <!-- <link rel="stylesheet" href="assets/css/vendor/plazaicon.css">
    <link rel="stylesheet" href="assets/css/vendor/themify-icons.css">
    <link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css"> -->

    <!-- Plugins CSS -->
    <!-- <link rel="stylesheet" href="assets/css/plugins/animate.css">
    <link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/plugins/select2.min.css"> -->

    <!-- Helper CSS -->
    <link rel="stylesheet" href="assets/css/helper.css" />

    <!-- Main Style CSS -->
    <!-- <link rel="stylesheet" href="assets/css/style.css"> -->

    <!--====== Use the minified version files listed below for better performance and remove the files listed above ======-->
    <link rel="stylesheet" href="assets/css/plugins-min/plugins.min.css" />
    <link rel="stylesheet" href="assets/css/style.min.css" />
    <link rel="stylesheet" href="assets/css/element.css" />
  </head>

  <body>
    <div class="main-wrapper" id="app">
      <!--Header Section Start-->
      <div class="header-section d-none d-lg-block">
        <div class="main-header">
          <div class="container position-relative">
            <div class="row align-items-center">
              <div class="col-lg-9">
                <div class="header-logo">
                  <a href="index.html"
                    ><img src="assets/images/logo/logo.png" alt="" style="width: 150px; height: 80px;"
                  /></a>
                </div>
              </div>
              <div class="col-lg-3">
                <span>欢迎登录幸福里花卉</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Header Section End-->

      <!--Page Banner Start-->
      <div
        class="page-banner"
        style="background-image: url(assets/images/testimonial-bg.jpg);"
      >
        <div class="container">
          <div class="page-banner-content text-center">
            <h2 class="title">忘记密码</h2>
            <ol class="breadcrumb justify-content-center">
              <li class="breadcrumb-item"><a href="index.html">首页</a></li>
              <li class="breadcrumb-item active" aria-current="page">忘记密码</li>
          </ol>
          </div>
        </div>
      </div>
      <!--Page Banner End-->

      <!--Register Start-->
      <div class="register-page section-padding-5">
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-6">
              <div class="login-register-content">
                <h4 class="title">忘记密码</h4>
                <div class="login-register-form">
                  <!-- <form action="#">
                        <div class="single-form">
                          <label>手 机 号</label>
                          <input type="email" />
                        </div>
                        <div class="single-form smsform">
                          <label>验 证 码</label> 
                          <input type="password" />
                          <button class="btn btn-primary btn-block btncode">
                            获取验证码
                          </button>
                        </div>
                        <div class="single-form">
                          <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                          <input type="password" />
                        </div>
                        <div class="single-form">
                          <label>新 密 码</label>
                          <input type="password" />
                        </div>
                        <div class="single-form">
                          <button class="btn btn-primary btn-block">确定</button>
                        </div>
                        <div class="single-form">
                          <label>已有账号？</label>
                          <a href="login.html" class="btn btn-dark btn-block"
                            >立即登录</a
                          >
                        </div>
                      </form> -->
                      <el-form
                      :model="ruleForm"
                      status-icon
                      :rules="rules"
                      ref="ruleForm"
                      class="demo-ruleForm"
                    >
                      <el-form-item prop="phone" label="手机号">
                        <el-input
                          size="mini"
                          v-model="ruleForm.phone"
                          auto-complete="off"
                          placeholder="手机号"
                          class="input-with-select"
                        >
                        </el-input>
                      </el-form-item>
                      <el-form-item
                        prop="smscode"
                        class="code smsform"
                        label="验证码"
                      >
                        <el-input
                          v-model="ruleForm.smscode"
                          placeholder="验证码"
                          class="smcode"
                        >
                        </el-input>
                        <el-button
                          type="primary"
                          :disabled="isDisabled"
                          @click="sendCode"
                          class="btncode"
                        >
                          {{buttonText}}
                        </el-button>
                      </el-form-item>
                      <el-form-item prop="password" label="密码">
                        <el-input
                          type="password"
                          v-model="ruleForm.password"
                          auto-complete="off"
                          show-password
                          placeholder="请输入 6 到 15 个字符"
                        ></el-input>
                      </el-form-item>
                      <el-form-item prop="checkPass" label="新密码">
                        <el-input
                          type="password"
                          v-model="ruleForm.checkPass"
                          auto-complete="off"
                          show-password
                          placeholder="请输入 6 到 15 个字符"
                        ></el-input>
                      </el-form-item>
                      <el-form-item>
                        <div class="single-form">
                          <button
                            class="btn btn-primary btn-block"
                            @click="submitForm('ruleForm')"
                          >
                            确定
                          </button>
                        </div>
                      </el-form-item>
                      <div class="single-form">
                        <label>已有账号？</label>
                        <a href="login.html" class="btn btn-dark btn-block"
                          >立即登录</a
                        >
                      </div>
                    </el-form>
                  </el-form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--Register End-->
      <!--Footer Section Start-->
      <div class="footer-area">
        <div class="container">
            <div class="footer-widget-area section-padding-6">
                <div class="row justify-content-between">

                    <!--Footer Widget Start-->
                    <div class="col-lg-4 col-md-6">
                        <div class="footer-widget">
                          <img src="assets/images/logo/logo.png" alt="" style="width: 230px;height: 120px;">
                            <!--  -->
                        </div>
                        <!--Footer Widget End-->
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="footer-widget">
                            <h4 class="footer-widget-title">信息</h4>
                            <div class="footer-widget-menu">
                                <ul>
                                    <li><a></a></li>
                                    <li><a></a></li>
                                    <li><a>常见问题</a></li>
                                    <li><a>商店地址</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="footer-widget">
                            <h4 class="footer-widget-title">账户</h4>

                            <div class="footer-widget-menu">
                                <ul>
                                    <li><a>法律声明</a></li>
                                    <li><a>安全条款</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="footer-widget">
                            <h4 class="footer-widget-title">帮助</h4>

                            <div class="footer-widget-menu">
                                <ul>
                                    <li><a>常见问题</a></li>
                                    <li><a>定价方案</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <div class="footer-widget">
                            <h4 class="footer-widget-title">顾客服务</h4>
                            <div class="footer-widget-menu">
                                <ul>
                                    <li><a>我的账户</a></li>
                                    <li><a>使用条款</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
      <!--Footer Section End-->

      <!--Back To Start-->
      <a  class="back-to-top">
        <i class="fa fa-angle-double-up"></i>
      </a>
      <!--Back To End-->

      <!-- <div class="mask" v-show="isShow"></div>
        <div class="wrap" v-show="isShow">
          <p class=" m-10 f-16">请完成安全验证</p>
          <div id="verifyPic"></div>
        </div> -->
    </div>

    <!-- JS
    ============================================ -->

    <!-- Modernizer JS -->
    <script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
    <!-- jQuery JS -->
    <script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
    <!-- Bootstrap JS -->
    <!-- <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script> -->

    <!-- Plugins JS -->
    <!-- <script src="assets/js/plugins/swiper-bundle.min.js"></script>
    <script src="assets/js/plugins/jquery.countdown.min.js"></script>
    <script src="assets/js/plugins/jquery.elevateZoom.min.js"></script>
    <script src="assets/js/plugins/select2.min.js"></script> -->

    <!--====== Use the minified version files listed below for better performance and remove the files listed above ======-->
    <script src="assets/js/plugins.min.js"></script>

    <!-- Main JS -->
    <script src="assets/js/main.js"></script>

    <!-- Google Map js -->
    
    <script src="assets/js/map-script.js"></script>
    <script src="assets/js/lib/vue.js"></script>
    <script src="assets/js/lib/index.js"></script>
    <script src="assets/js/lib/axios.min.js"></script>
    <script src="assets/js/lib/jigsaw.min.js"></script>

    <script type="module">
      //   import { baseUrl } from "./service/index.js";
      //   import { Account } from "./api/login.js";
      //   import regex from "utils/helper/regexHelper.js";

      const vm = new Vue({
        // 配置对象 options
        // 配置选项(option)
        el: "#app", // element: 指定用vue来管理页面中的哪个标签区域
        data() {
          // 验证手机号是否合法
          let validateMobile = (rule, value, callback) => {
            if (!value) {
              return callback(new Error("手机号码不能为空"));
            } else {
              if (!regex.testMobileNo(value)) {
                callback(new Error("手机号码格式不正确"));
              }
            }
            callback();
          };
          //  验证码是否为空
          let checkSmscode = (rule, value, callback) => {
            if (value === "") {
              callback(new Error("请输入手机验证码"));
            } else {
              callback();
            }
          };
          // 验证密码
          let validatePassword = (rule, value, callback) => {
            if (value === "") {
              callback(new Error("请输入密码"));
            } else {
              if (value && !regex.testPassword(value)) {
                callback(
                  new Error("必须包含大小写字母和数字的组合，不能使用特殊字符")
                );
              }
            }
            callback();
          };
          // 二次验证密码
          let validatePass2 = (rule, value, callback) => {
            if (value === "") {
              callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.password) {
              callback(new Error("两次输入密码不一致!"));
            } else {
              callback();
            }
          };
          return {
            count: 0,
            isShow: false,
            flag: true,
            logining: false,
            checked: false,
            protocol: false,
            buttonText: "获取验证码",
            showSuccessForm: false,
            isDisabled: false, // 是否禁止点击获取验证码按钮
            ruleForm: {
              phone: "",
              password: "",
              checkPass: "",
              phoneType: "+86",
              smscode: ""
            },
            rules: {
              phone: [
                { required: true, message: "账号不能为空", trigger: "blur" },
                { validator: validateMobile, trigger: "blur" }
              ],
              password: [
                { required: true, message: "请输入密码", trigger: "blur" },
                { validator: validatePassword, trigger: "blur" }
              ],
              checkPass: [
                { required: true, validator: validatePass2, trigger: "change" }
              ],
              smscode: [
                { required: true, validator: checkSmscode, trigger: "change" }
              ]
            }
          };
        },
        methods: {
          onChange(e) {
            console.log(e);
            this.ruleForm.phoneType = e;
          },
          // 验证手机号
          checkMobile(str) {
            let re = /^1\d{10}$/;
            if (re.test(str)) {
              return true;
            } else {
              return false;
            }
          },
          goLogin() {
            this.showSuccessForm = false;
            this.goJump();
            window.location.href = "./login.html";
          },
          //5秒后跳转到登录
          goJump() {
            const TIME_COUNT = 5;
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer);
                  this.timer = null;
                  window.location.href = "./login.html";
                }
              }, 1000);
            }
          },
          // 初始化图片验证码
          picInit() {
            let _this = this;
            document.getElementById("verifyPic").innerHTML = "";
            jigsaw.init({
              el: document.getElementById("verifyPic"),
              width: 340, // 可选, 默认310
              height: 185, // 可选, 默认155
              onSuccess: function() {
                let phone = _this.ruleForm.phone;
                let params = {
                  countryCode: _this.ruleForm.phoneType,
                  mobile: phone,
                  smsType: "FORGET_PASSWORD"
                };
                Account.sendVerifyCode(
                  params,
                  function(data, __this) {
                    console.log(data);
                    if (data) {
                      __this.$message({
                        message: "验证码发送成功",
                        type: "success"
                      });
                    } else {
                      __this.$message.error("验证码发送失败");
                    }
                    __this.isShow = false;
                    __this.countDown();
                  },
                  function(data, __this) {
                    console.log(data);
                    __this.isShow = false;
                  },
                  _this
                );
              },
              onFail: function() {
                _this.$message.warning("请正确拼合图片");
              },
              onRefresh: function() {}
            });
          },
          // 倒计时
          countDown() {
            let time = 60;
            this.buttonText = "已发送";
            this.isDisabled = true;
            if (this.flag) {
              this.flag = false;
              let timer = setInterval(() => {
                time--;
                this.buttonText = time + " 秒";
                if (time === 0) {
                  clearInterval(timer);
                  this.buttonText = "重新获取";
                  this.isDisabled = false;
                  this.flag = true;
                }
              }, 1000);
            }
          },
          // 获取验证码
          sendCode() {
            this.showVerifyModel = true;
            let phone = this.ruleForm.phone;
            if (this.checkMobile(phone)) {
              this.isShow = true;
              this.picInit();
            }
          },
          // 提交修改
          submitForm(formName) {
            this.$refs[formName].validate(valid => {
              if (valid) {
                let params = {
                  countryCode: this.ruleForm.phoneType,
                  mobile: this.ruleForm.phone,
                  password: this.ruleForm.password,
                  verifyCode: this.ruleForm.smscode
                };
                Account.resetPassword(
                  params,
                  function(data, _this) {
                    console.log(data);
                    _this.showSuccessForm = true;
                    _this.goJump();
                  },
                  this
                );
              } else {
                return false;
              }
            });
          }
        },
        mounted() {}
      });
    </script>
    <style scoped>
     
      .mask {
        position: fixed;
        z-index: 10;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(10, 10, 10, 0.6);
      }
        .smsform {
          position: relative;
        }
        .btncode {
          width: 150px;
          height: 40px;
          position: absolute;
          right: 0;
        }
    </style>
  </body>
</html>
